<template>
	<view>
		<fa-navbar title=""></fa-navbar>
		<view class="px-2 pt-6">
			<h1 class="font32 col-main">欢迎注册家庭管理系统</h1>
			<view class="py-1 fa-user-form">
				<u-form :model="formData" ref="uForm">
					<u-form-item label="" left-icon=" iconfont icon-shouji" :border-bottom="false">
						<u-input v-model="formData.phone" :custom-style="{'font-size': '32rpx'}" height="80" placeholder="输入手机号码" maxlength="11" type="number"/>
					</u-form-item>
					<u-form-item label="" :border-bottom="false">
						<u-input v-model="formData.code" :custom-style="{'font-size': '32rpx'}" height="80" placeholder="输入验证码" maxlength="6"/>
						<u-button v-show="showCode" slot="right" @click="getPhoneCode" style="margin-right: -20rpx;" type="primary">获取验证码</u-button>
						<u-button v-show="!showCode" slot="right" style="margin-right: -20rpx;" type="default" class="btn-disable" :disabled="true">
							<u-count-down ref="uCountDown" :timestamp="59" :autoplay="false" bg-color="transparent" color="#FFFFFF" font-size="24" 
							:show-days="false" :show-hours="false" :show-minutes="false" @end="showCode = true"></u-count-down>s 重新获取
						</u-button>
					</u-form-item>
				</u-form>
			</view>
			<view class="pt-5">
				<u-button 
					:type="!formValid ? 'default' : 'primary'"
					shape="circle"
					class="btn-grad" 
					:class="formValid ? '' : 'btn-disable'"
					:disabled="!formValid"
					@click="validateIdentifyCode"
				>立即注册</u-button>
			</view>
			<view class="font24 text-center pt-2 col-gray">
				注册即视为同意
				<text class="h4-font-royal-blue" @click="toPage('/pages/user/about/privacyPolicy')">《隐私协议》</text>和
				<text class="h4-font-royal-blue" @click="toPage('/pages/user/about/serviceAgreement')">《用户服务协议》</text>
			</view>
		</view>
		<view class="text-center pos-fix fullwidth col-gray" style="bottom: 60rpx;" @click="customerHotline">
			<u-icon name=" iconfont icon-kefu" class="pr-m1"></u-icon>客服热线
		</view>
		<u-modal
			v-model="showModel"
			content="您的手机号还未被邀请，请联系我司客服" 
			title="提示"
			:title-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:content-style="{'font-size': '32rpx', 'color': '#4F5053'}"
			:cancel-style="{'font-size': '36rpx', 'color': '#2A2A2A'}"
			:confirm-style="{'font-size': '36rpx', 'color': '#2E73E5'}"
			confirm-text="确定"
			@confirm="showModel = false"
		></u-modal>
	</view>
</template>

<script>
	import faNavbar from '@/components/fa-navbar/fa-navbar.vue'
	import rules from '@/util/plugins/rules.js'
	import HttpAuth from '@/util/plugins/digest_app.js'
	export default {
		components: {
			faNavbar
		},
		data() {
			return {
				showModel: false,
				showCode: true,
				formData: {
					phone: '',
					code: ''
				},
				authen: ''
			}
		},
		computed: {
			// 表单检验
			formValid() {
				return this.formData.phone.length == 11 && this.formData.code.length > 0
			}
		},
		onLoad() {
			
		},
		methods: {
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			
			// 校验表单数据
			validateFormData() {
				if (this.formData.phone == '') {
					uni.showToast({ title: '请输入手机号码', icon: 'none'});
					return false
				}
				if (!rules['moblie'].test(this.formData.phone)) {
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none'});
					return false
				}
				return true
			},
			
			// 校验验证码是否正确
			validateIdentifyCode() {
				uni.showLoading({
					title: '验证中'
				})
				
				if (!this.validateFormData()) return
				console.log('val')
				// 摘要认证请求
				let body = {
				    input: { 
						Mobile: this.formData.phone,
						IdentifyCode: this.formData.code
					}
				}
				HttpAuth.request({
				    type: "POST", //请求类型，GET或POST
				    url: "/api/fasg/Register/ValidateIdentifyCode?servicekey=Register", //请求地址
				    authType: "Digest", //认证类型，支持Diget与Basic，为空会自动判断
				    username: "admin", //用户名
				    password: "cba#834451", //密码
				    data: body,
				    contentType: "application/json; charset=UTF-8", //Content-Type
				    context: this, //回调函数上下文
				    success: (res) => {
						if (res.code == 0) {
							uni.showToast({ title: "验证通过", icon: 'none'});
							setTimeout(() => {
								uni.redirectTo({
									url: `/pages/login/perfect?phone=${this.formData.phone}`
								})
							}, 500);
						}else {
							uni.showToast({ title: res.message, icon: 'none'})
						}
				    },
				    error: (err) => {
						uni.showToast({ title: "验证失败", icon: 'none'});
				        console.log("401 error");
				    }
				})
			},
			
			// 获取验证码
			getPhoneCode() {
				uni.showLoading({
					title: '获取中'
				})
				
				if (!this.validateFormData()) return
				
				// 摘要认证请求
				let body = {
				    input: { Mobile: this.formData.phone }
				}
				HttpAuth.request({
				    type: "POST", //请求类型，GET或POST
				    url: "/api/fasg/Register/GetIdentifyCode?servicekey=Register", //请求地址
				    authType: "Digest", //认证类型，支持Diget与Basic，为空会自动判断
				    username: "admin", //用户名
				    password: "cba#834451", //密码
				    data: body,
				    contentType: "application/json; charset=UTF-8", //Content-Type
				    context: this, //回调函数上下文
				    success: (res) => {
						if (res.code == 0) {
							uni.showToast({ title: '短信已发送至你的手机，请注意查收', icon: 'none'});
							this.$refs.uCountDown.start();
							this.showCode = false;
						}else {
							uni.showToast({ title: res.message, icon: 'none'})
						}
				    },
				    error: (err) => {
						uni.showToast({ title: "获取失败", icon: 'none'});
				        console.log("401 error");
				    }
				})
				
			},
			
			// 拨打客服热线
			customerHotline() {
				uni.makePhoneCall({
				    phoneNumber: '0755-33200566'
				});
			}
			
		}
	}
</script>

<style>
</style>
